<template>
	<view class="container">
		<userinfo v-if="user_options.toLogin" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo"></userinfo>
		<view class="tui-pro-detail">
			<view class="tui-product-title">
				<view class="tui-pro-titbox">
					<view class="tui-pro-title">{{listdata.appoint_name}}</view>
				</view>
				<view class="tui-pro-pricebox tui-padding">
					<view class="tui-pro-price">
						<view class="tui-price">￥{{listdata.appoint_price}}</view>
						<tui-tag size="small" :fillet="false" type="red" v-if="listdata.payment_status == 0">一口价</tui-tag>
						<tui-tag size="small" :fillet="false" type="red" v-if="listdata.payment_status == 1">预付金</tui-tag>
						<tui-tag size="small" :fillet="true" type="coffee" v-if="listdata.appoint_type == 0">到店服务</tui-tag>
						<tui-tag size="small" :fillet="true" type="coffee" v-if="listdata.appoint_type == 1">上门服务</tui-tag>
					</view>
				</view>
				<view class="tui-padding">
					<view class="tui-sale-info tui-size tui-gray">
						<view class="tui-rate-container">
							<tui-rate :current="3" :disabled="true" :size="16"></tui-rate>
							<text style="line-height: 40rpx;color: rgb(228, 31, 25);font-size: 28rpx;margin-left: 5rpx;">3</text>
						</view>
						<view>访问数{{listdata.appoint_hits}}</view>
						<view>已预约{{listdata.appoint_sum}}</view>
					</view>
				</view>
				<view class="tui-banner-swiper">
					<scroll-view scroll-x="true">
						<view style="display: flex;flex-direction: row;align-items: center;display: -webkit-box;
				    overflow-x: scroll;
				    -webkit-overflow-scrolling: touch;">
							<block v-for="(item,index) in listdata.all_pic" :key="index">
								<image :src="item.image" class="tui-slide-image" @tap.stop="previewImage(index)" />
							</block>
						</view>
					</scroll-view>
				</view>
			</view>

			<view class="tui-basic-info tui-mtop">
				<view class="tui-list-cell" @tap="showPopup">
					<view class="tui-cell-title">已选</view>
					<view class="tui-bold  tui-selected-box">{{cate}}</view>
					<tui-icon name="more-fill" :size="20" class="tui-right" color="#666"></tui-icon>
				</view>
			</view>

			<view class="tui-cmt-box tui-mtop">
				<view class="tui-list-cell tui-last tui-between">
					<view class="tui-bold tui-cell-title">用户评价</view>
					<view @tap="common">
						<text class="tui-cmt-all">100%</text>
						<text style="color:#333; font-size: 28rpx;">好评</text>
					</view>
				</view>
				<!-- <view class="tui-padding">
					<view class="tui-tag-coupon-box">
						<tui-tag size="small" type="pink" shape="circle" tui-tag-class="tui-tag-coupon">满99减8</tui-tag>
						<tui-tag size="small" type="pink" shape="circle" tui-tag-class="tui-tag-coupon">满59减5</tui-tag>
					</view>
				</view> -->
				
				<view class="tui-cmt-content tui-padding" v-for="(ite,idx) in commentlist">
					<view class="tui-cmt-user">
						<view style="margin-right: 15rpx;">{{ite.nickname}}</view>
						<view class="tui-rate-container">
							<tui-rate :current="parseInt(ite.score)" :disabled="true" :size="16"></tui-rate>
						</view>
					</view>
					<view class="tui-cmt">{{ite.content}}</view>
					<!-- 评价规格 -->
					<!-- <view class="tui-attr">颜色：叠层钛钢流苏耳环（A74）</view> -->
				</view>

				<view class="tui-cmt-btn" v-if="commentlist[0]">
					<tui-tag type="black" :plain="true" shape="circle" tui-tag-class="tui-tag-cmt" @tap="common">查看全部评价</tui-tag>
				</view>
				<view v-if="!commentlist[0]" style="text-align: center;padding-bottom: 15rpx;">暂无评价</view>
			</view>
			<view class="tui-cmt-box tui-mtop">
				<view class="tui-cmt-content tui-paddings">
					<view class="tui-cmt-user">
						<image src="../../../static/images/nav1.png" class="tui-acatar"></image>
						<view class="shop-right">
							<view class="shop-info tui-between">
								<view class="shop-name tui-bold">{{listdata.name}}</view>
								<!-- <view style="red;line-height: 60rpx;">点击关注</view> -->
							</view>
							<view>{{listdata.phone}}</view>
						</view>
					</view>
					<view class="shop-info" style="justify-content: center;">
						<view style="display: flex;align-items: center;flex-direction: column;width: 33%;border-right: 2rpx solid #F1F1F1;">
							<view class="title">{{merchant_statistics.appoint_num}}</view>
							<view class="text">全部服务</view>
						</view>
						<view style="display: flex;align-items: center;flex-direction: column;width: 33%;border-right: 2rpx solid #F1F1F1;">
							<view class="title">{{merchant_statistics.appoint_sum}}</view>
							<view class="text">服务次数</view>
						</view>
						<view style="display: flex;align-items: center;flex-direction: column;width: 33%;">
							<view class="title">{{merchant_statistics.favorable_rate}}%</view>
							<view class="text">好评率</view>
						</view>
					</view>
					<view class="shop-info" style="justify-content: center;padding: 0 120rpx;">
						<view style="display: flex;align-items: center;flex-direction: column;width: 50%;">
							<view class="tui-cmt-btn">
								<tui-tag type="red" :plain="true" shape="circle" tui-tag-class="tui-tag-cmt" @tap="callphone(listdata.phone)">联系商家</tui-tag>
							</view>
						</view>
						<view style="display: flex;align-items: center;flex-direction: column;width: 50%;">
							<view class="tui-cmt-btn">
								<tui-tag type="red" :plain="true" shape="circle" tui-tag-class="tui-tag-cmt" @tap="goshop(listdata.store_url)">进店看看</tui-tag>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tui-nomore-box">
				<tui-nomore text="宝贝详情" :visible="true" bgcolor="#f7f7f7"></tui-nomore>
			</view>
			<view class="tui-product-img tui-radius-all">
				<rich-text :nodes="listdata.appoint_pic_content" :loading="loading" /></rich-text>
			</view>
			<tui-nomore text="已经到最底了" :visible="true" bgcolor="#f7f7f7"></tui-nomore>
			<view class="tui-safearea-bottom"></view>
		</view>

		<!--底部操作栏-->
		<view class="tui-operation">
			<view class="tui-operation-left tui-col-5">
				<view class="tui-operation-item" hover-class="opcity" :hover-stay-time="150" v-if="alldata.kf_url" @tap="gokf(alldata.kf_url)">
					<tui-icon name="kefu" :size="22" color='#333'></tui-icon>
					<view class="tui-operation-text tui-scale-small">客服</view>
				</view>
				<view class="tui-operation-item" hover-class="opcity" :hover-stay-time="150"  @tap="goshop(listdata.store_url)">
					<tui-icon name="shop" :size="22" color='#333'></tui-icon>
					<view class="tui-operation-text tui-scale-small">店铺</view>
				</view>
				<view class="tui-operation-item" @tap="collecting" hover-class="opcity" :hover-stay-time="150">
					<view class="tui-icon tui-icon-collection" :class="['tui-icon-'+(collected?'like-fill':'like')]" :style="{color:collected?'#ff201f':'#333',fontSize:'22px'}"></view>
					<view class="tui-operation-text tui-scale-small" :class="[collected?'tui-icon-red':'']">收藏</view>
				</view>
				<view class="tui-operation-item" hover-class="opcity" :hover-stay-time="150">
					<tui-icon name="partake" color="#333" :size="22"></tui-icon>
					<text class="tui-operation-text tui-scale-small">分享</text>
				</view>
			</view>
			<view class="tui-operation-right tui-right-flex tui-col-7 tui-btnbox-4">
				<view class="tui-flex-1">
					<tui-button type="red" shape="square" size="mini" @click="showPopup">立即预约</tui-button>
				</view>
			</view>
		</view>


		<!--底部操作栏--->

		<!--顶部下拉菜单-->
		<!---顶部下拉菜单-->

		<!--底部选择层-->
		<tui-bottom-popup :show="popupShow" @close="hidePopup">
			<view class="tui-popup-box">
				<view class="tui-product-box tui-padding">
					<image :src="listdata.all_pic[0].image" class="tui-popup-img"></image>
					<view class="tui-popup-price">
						<view class="tui-amount tui-bold">¥{{price}}</view>
						<view class="tui-bold tui-cell-title" style="color: #ff201f;">定金:¥{{payment_price}}</view>
						<view class="tui-number">{{cate}}</view>
					</view>
				</view>
				<scroll-view scroll-y class="tui-popup-scroll">
					<view class="tui-scrollview-box">
						<view class="tui-bold tui-attr-title">选择</view>
						<view class="tui-attr-box">
							<view class="tui-attr-item" v-for="(item,index) in appoint_product_list" :class="num[index]? 'tui-attr-active': ''" @tap="selectcate(item.id,item.price,item.name,item.payment_price,index)">
								{{item.name}}
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="tui-operation tui-operation-right tui-right-flex tui-popup-btn">
					<view class="tui-flex-1">
						<tui-button type="red" shape="square" size="mini" @click="submit">立即预约</tui-button>
					</view>
				</view>
				<view class="tui-icon tui-icon-close-fill tui-icon-close" style="color: #999;font-size:20px" @tap="hidePopup"></view>
				
			</view>
		</tui-bottom-popup>
		<!--底部选择层-->

	</view>
</template>

<script>
	import tuiIcon from "../../../appComponent/uni/icon/icon.vue"
	import tuiTag from "../component/tag/tag.vue"
	import tuiBadge from "../component/badge/badge.vue"
	import tuiNomore from "../component/nomore/nomore"
	import tuiButton from "../component/button/button"
	import tuiBottomPopup from "../component/bottom-popup/bottom-popup"
	import tuiNumberbox from "../component/numberbox/numberbox"
	import tuiRate from "../component/rate/rate"
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	const getGoodsinfo = () => {
		common.post('Appoint_new&a=detail', {
			appoint_id: _this.appoint_id,
		}, data => {
			console.log("nnnnnnn", data)
			_this.listdata= data.now_appoint;
			_this.merchant_statistics = data.now_appoint.merchant_statistics
			_this.price = _this.listdata.appoint_price;
			_this.payment_price = _this.listdata.payment_money;// 定金
			_this.commentlist = data.comment_list;
			_this.alldata = data;
			_this.appoint_product_list = data.appoint_product_list;
		});
	};
	const getGoodslike = () => {
		common.post('Appoint_new&a=collection', {
			appoint_id: _this.appoint_id,
		}, data => {
			console.log("ccccccccccccccccc", data)
			if(data.errorCode == 1001){
				
			}else{
				this.collected = !this.collected;
			}
		});
	};
	export default {
		components: {
			tuiIcon,
			tuiTag,
			tuiBadge,
			tuiNomore,
			tuiButton,
			tuiBottomPopup,
			tuiNumberbox,
			tuiRate
		},
		data() {
			return {
				listdata:{},
				user_options: {},
				merchant_statistics:{},
				alldata:{}, // 所以数据data
				commentlist: [], // 评论数据
				appoint_product_list:[], // 规格数据
				num: [], // 底部选择index
				price: '', // 底部选择价格
				payment_price: '',// 底部选择定金
				cate:'请选择', // 底部选择规格
				cateid: '', // 底部选择id
				height: 64, //header高度
				top: 0, //标题图标距离顶部距离
				scrollH: 0, //滚动总高度
				opcity: 0,
				iconOpcity: 0.5,
				banner: [
					"https://www.thorui.cn/img/product/11.jpg",
					"https://www.thorui.cn/img/product/2.png",
					"https://www.thorui.cn/img/product/33.jpg",
					"https://www.thorui.cn/img/product/4.png",
					"https://www.thorui.cn/img/product/55.jpg",
					"https://www.thorui.cn/img/product/6.png",
					"https://www.thorui.cn/img/product/7.jpg",
					"https://www.thorui.cn/img/product/8.jpg"
				],
				bannerIndex: 0,
				topMenu: [],
				menuShow: false,
				popupShow: false,
				value: 1,
				collected: false,
				appoint_id:'',
				loading:false//开启loading不显示默认值
			}
		},
		onLoad: function(options) {
			_this = this;
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			_this.appoint_id = options.appoint_id;
			console.log("wwwwwww",_this.appoint_id)
			// 获取商品详情信息
			getGoodsinfo();
			setTimeout(() => {
				uni.getSystemInfo({
					success: (res) => {
						this.width = obj.left || res.windowWidth;
						this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
						this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
						this.scrollH = res.windowWidth
					}
				})
			}, 50)
		},
		methods: {
			gokf(kf_url){
				uni.navigateTo({
					url: alldata.kf_url
				})
			},
			goshop(store_url){
				uni.navigateTo({
					url: common.parseUrl(store_url)
				})
			},
			callphone(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			selectcate(id,price,name,payment_price,index){
				_this.num[index] = !_this.num[index]
				_this.$forceUpdate();
				// if(_this.num[index] == false){
				// 	_this.cate = "请选择";
				// 	_this.price = _this.listdata.appoint_price;
				// 	_this.payment_price = _this.listdata.payment_money;
				// 	_this.cateid = '';
					
				// }else{
				// 	_this.cate = name;
				// 	_this.price = price;
				// 	_this.payment_price = payment_price;
				// 	_this.cateid = id;
				// }
			},
			bannerChange: function(e) {
				this.bannerIndex = e.detail.current
			},
			previewImage: function(index) {
				let img = _this.listdata.all_pic.map(item => {
					return item.image
				})
				console.log("name",img)
				uni.previewImage({
					current: index,
					urls: img
				})
			},
			// back: function() {
			// 	uni.navigateBack()
			// },
			// openMenu: function() {
			// 	this.menuShow = true
			// },
			closeMenu: function() {
				this.menuShow = false
			},
			showPopup: function() {
				if (app.globalData.is_login){
					if(!_this.appoint_product_list){
						this.popupShow = false
						uni.navigateTo({
							url: '/pages/appoint/goods/submitOrder?cateid=' + _this.cateid + '&appoint_id=' + _this.appoint_id
						})
					}else{
						this.popupShow = true
					}
				}else{
					_this.user_options = {
						toLogin: true
					};
				}
				
			},
			hidePopup: function() {
				this.popupShow = false
			},
			change: function(e) {
				this.value = e.value
			},
			collecting: function() {
				getGoodslike();
				
				
			},
			common: function() {
				uni.navigateTo({
					url:'/pages/appoint/goods/commentList?appoint_id=' + _this.appoint_id
				})
			},
			submit() {
				if(_this.cateid){
					this.popupShow = false
					uni.navigateTo({
						url: '/pages/appoint/goods/submitOrder?cateid=' + _this.cateid + '&appoint_id=' + _this.appoint_id
					})
				}else{
					uni.showModal({
						title: common.changeTxt('提示'),
						content: common.changeTxt('请选择规格'),
						showCancel: false,
						confirmText: common.changeTxt('好的'),
						success: function(res) {
							if (res.confirm) {
								
							}
						}
					});
				}
			},
			coupon() {
				uni.navigateTo({
					url: '../mall-extend/coupon/coupon'
				})
			}
		},
		onPageScroll(e) {
			let scroll = e.scrollTop <= 0 ? 0 : e.scrollTop;
			let opcity = scroll / this.scrollH;
			if (this.opcity >= 1 && opcity >= 1) {
				return;
			}
			this.opcity = opcity;
			this.iconOpcity = 0.5 * (1 - opcity < 0 ? 0 : 1 - opcity)
		}
	}
</script>

<style>
	/* icon 也可以使用组件*/
	@import "../../../static/style/icon.css";

	page {
		background: #f7f7f7;
	}

	.container {
		padding-bottom: 110rpx;
	}

	.tui-header-box {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9998;
	}

	.tui-header {
		width: 100%;
		font-size: 18px;
		line-height: 18px;
		font-weight: 500;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-header-icon {
		position: fixed;
		top: 0;
		left: 10px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		height: 32px;
		transform: translateZ(0);
		z-index: 99999;
	}



	.tui-header-icon .tui-badge {
		background: #e41f19 !important;
		position: absolute;
		right: -4px;
	}

	.tui-icon-ml {
		margin-left: 20rpx;
	}

	.tui-icon {
		border-radius: 16px;
	}


	.tui-icon-back {
		height: 32px !important;
		width: 32px !important;
		display: block !important;
	}

	.tui-header-icon .tui-icon-more-fill {
		height: 20px !important;
		width: 20px !important;
		padding: 6px !important;
		display: block !important;
	}

	.tui-banner-swiper {
		width: 100%;
		overflow-x: scroll; // 子元素的宽度大于父元素的即可滚动
		overflow-y: hidden;
		margin-top: 15rpx;
	}

	.tui-slide-image {
		width: 200rpx;
		height: 200rpx !important;
		display: block;
		margin-left: 15rpx;
		border-radius: 10rpx;
	}

	/*顶部菜单*/

	.tui-menu-box {
		box-sizing: border-box;
	}

	.tui-menu-header {
		font-size: 34rpx;
		color: #fff;
		height: 32px;
		display: flex;
		align-items: center;
	}

	.tui-top-dropdown {
		z-index: 9999 !important;
	}

	.tui-menu-itembox {
		color: #fff;
		padding: 40rpx 10rpx 0 10rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		font-size: 26rpx;
	}

	.tui-menu-item {
		width: 22%;
		height: 160rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		background: rgba(0, 0, 0, 0.4);
		margin-right: 4%;
		margin-bottom: 4%;
	}

	.tui-menu-item:nth-of-type(4n) {
		margin-right: 0;
	}

	.tui-badge-box {
		position: relative;
	}

	.tui-badge-box .tui-badge-class {
		position: absolute;
		top: -8px;
		right: -8px;
	}

	.tui-msg-badge {
		top: -10px;
	}

	.tui-icon-up {
		position: relative;
		display: inline-block;
		left: 50%;
		transform: translateX(-50%);
	}

	.tui-menu-text {
		padding-top: 12rpx;
	}

	.tui-opcity .tui-menu-text,
	.tui-opcity .tui-badge-box {
		opacity: 0.5;
		transition: opacity 0.2s ease-in-out;
	}

	/*顶部菜单*/

	/*内容 部分*/

	.tui-padding {
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.tui-paddings {
		padding: 20rpx 30rpx 0rpx 30rpx;
		box-sizing: border-box;
	}
	/* #ifdef H5 */
	.tui-ptop {
		padding-top: 44px;
	}

	/* #endif */

	.tui-size {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-gray {
		color: #999;
	}

	.tui-icon-red {
		color: #ff201f;
	}

	.tui-border-radius {
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
		overflow: hidden;
	}

	.tui-radius-all {
		border-radius: 24rpx;
		overflow: hidden;
	}

	.tui-mtop {
		margin-top: 26rpx;
	}

	.tui-pro-detail {
		box-sizing: border-box;
		color: #333;
	}

	.tui-product-title {
		background: #fff;
		padding: 30rpx 0;
	}

	.tui-pro-pricebox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #ff201f;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 44rpx;
	}

	.tui-pro-price {
		display: flex;
		align-items: center;
	}

	.tui-pro-price .tui-tag-class {
		transform: scale(0.7);
		transform-origin: center center;
		line-height: 24rpx;
		font-weight: normal;
	}

	.tui-price {
		font-size: 40rpx;
	}

	.tui-original-price {
		font-size: 26rpx;
		line-height: 26rpx;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-line-through {
		text-decoration: line-through;
	}

	.tui-collection {
		color: #333;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		height: 44rpx;
	}

	.tui-scale {
		/* transform: scale(0.7); */
		transform-origin: center center;
		line-height: 24rpx;
		font-weight: normal;
	}

	.tui-icon-collection {
		line-height: 20px !important;
		margin-bottom: 0 !important;

	}

	.tui-pro-titbox {
		font-size: 32rpx;
		font-weight: 500;
		position: relative;
		padding: 0 150rpx 0 30rpx;
		box-sizing: border-box;
	}

	.tui-pro-title {
		padding-top: 20rpx;
	}

	.tui-share-btn {
		display: block;
		background: none;
		margin: 0;
		padding: 0;
		border-radius: 0;
	}

	.tui-tag-share {
		display: flex;
		align-items: center;
	}

	.tui-share-position {
		position: absolute;
		right: 0;
		top: 30rpx;
	}

	.tui-share-text {
		padding-left: 8rpx;
	}

	.tui-sub-title {
		padding: 20rpx 0;
	}

	.tui-sale-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 30rpx;
	}

	.tui-discount-box {
		background: #fff;
	}

	.tui-list-cell {
		position: relative;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		line-height: 26rpx;
		padding: 36rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-right {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.tui-top40 {
		top: 40rpx !important;
	}

	.tui-bold {
		font-weight: bold;
	}

	.tui-list-cell::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 126rpx;
	}

	.tui-last::after {
		border-bottom: 0 !important;
	}

	.tui-tag-coupon-box {
		display: flex;
		align-items: center;
	}

	.tui-tag-coupon-box .tui-tag-class {
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}


	.tui-cell-title {
		padding-right: 30rpx;
		flex-shrink: 0;
	}

	.tui-promotion-box {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 10rpx 0;
		width: 74%;
	}

	.tui-promotion-box .tui-tag-class {
		display: inline-block !important;
		transform: scale(0.8);
		transform-origin: 0 center;
	}

	/* .tui-inline-block {
		display: inline-block !important;
		transform: scale(0.8);
		transform-origin: 0 center;
	} */

	.tui-basic-info {
		background: #fff;
	}

	.tui-addr-box {
		width: 76%;
	}

	.tui-addr-item {
		padding: 10rpx;
		line-height: 34rpx;
	}

	.tui-guarantee {
		background: #fdfdfd;
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 30rpx 30rpx 30rpx;
		font-size: 24rpx;
	}

	.tui-guarantee-item {
		color: #999;
		padding-right: 30rpx;
		padding-top: 10rpx;
	}

	.tui-pl {
		padding-left: 4rpx;
	}

	.tui-cmt-box {
		background: #fff;
	}

	.tui-between {
		justify-content: space-between !important;
	}

	.tui-cmt-all {
		color: #ff201f;
		padding-right: 8rpx;
	}

	.tui-cmt-content {
		font-size: 26rpx;
	}

	.tui-cmt-user {
		display: flex;
		align-items: center;
	}

	.tui-acatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
		display: block;
		margin-right: 16rpx;
		flex-shrink: 0;
	}

	.tui-cmt {
		padding: 14rpx 0;
	}

	.tui-attr {
		font-size: 24rpx;
		color: #999;
		padding: 6rpx 0;
	}

	.tui-cmt-btn {
		padding: 50rpx 0 30rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-tag-cmt {
		min-width: 130rpx;
		padding: 20rpx 52rpx !important;
		font-size: 26rpx !important;
		display: inline-block;
	}

	.tui-nomore-box {
		padding-top: 10rpx;
	}

	.tui-product-img {
		transform: translateZ(0);
	}

	.tui-product-img image {
		width: 100%;
		display: block;
	}

	/*底部操作栏*/

	.tui-col-7 {
		width: 58.33333333%;
	}

	.tui-col-5 {
		width: 41.66666667%;
	}

	.tui-operation {
		width: 100%;
		height: 100rpx;
		/* box-sizing: border-box; */
		background: rgba(255, 255, 255, 0.98);
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 10;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}

	.tui-operation::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-operation-left {
		display: flex;
		align-items: center;
	}

	.tui-operation-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
	}

	.tui-operation-text {
		font-size: 22rpx;
		color: #333;
	}

	.tui-opacity {
		opacity: 0.5;
	}

	.tui-scale-small {
		transform: scale(0.9);
		transform-origin: center center;
	}

	.tui-operation-right {
		height: 100rpx;
		/* box-sizing: border-box; */
		padding-top: 0;
	}

	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-btnbox-4 .tui-btn-class {
		width: 90% !important;
		display: block !important;
		font-size: 28rpx !important;
	}

	.tui-operation .tui-badge-class {
		position: absolute;
		top: -6rpx;
		/* #ifdef H5 */
		transform: translateX(50%)
			/* #endif  */
	}

	.tui-flex-1 {
		flex: 1;
	}

	/*底部操作栏*/

	/*底部选择弹层*/

	.tui-popup-class {
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-popup-box {
		position: relative;
		padding: 30rpx 0 100rpx 0;
	}

	.tui-popup-btn {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.tui-popup-btn .tui-btn-class {
		width: 90% !important;
		display: block !important;
		font-size: 28rpx !important;
	}

	.tui-icon-close {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}

	.tui-product-box {
		display: flex;
		align-items: flex-end;
		font-size: 24rpx;
		padding-bottom: 30rpx;
		margin-top: -100rpx;
	}

	.tui-popup-img {
		height: 200rpx;
		width: 200rpx;
		border-radius: 24rpx;
		display: block;
	}

	.tui-popup-price {
		padding-left: 20rpx;
		padding-bottom: 8rpx;
	}

	.tui-amount {
		color: #ff201f;
		font-size: 36rpx;
	}

	.tui-number {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 12rpx;
		color: #999;
	}

	.tui-popup-scroll {
		height: 600rpx;
		font-size: 26rpx;
	}

	.tui-scrollview-box {
		padding: 0 30rpx 60rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-attr-title {
		padding: 10rpx 0;
		color: #333;
	}

	.tui-attr-box {
		font-size: 0;
		padding: 20rpx 0;
	}

	.tui-attr-item {
		max-width: 100%;
		min-width: 200rpx;
		height: 64rpx;
		display: -webkit-inline-flex;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #f7f7f7;
		padding: 0 26rpx;
		box-sizing: border-box;
		border-radius: 32rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
	}

	.tui-attr-active {
		background: #fcedea !important;
		color: #e41f19;
		font-weight: bold;
		position: relative;
	}

	.tui-attr-active::after {
		content: "";
		position: absolute;
		border: 1rpx solid #e41f19;
		width: 100%;
		height: 100%;
		border-radius: 40rpx;
		left: 0;
		top: 0;
	}

	.tui-number-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0 30rpx 0;
		box-sizing: border-box;
	}
	.shop-right {
		width: 100%;
	}
	.shop-info {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.shop-name {
		font-size: 28rpx;
		line-height: 60rpx;
	}
	.title {
		font-size: 26rpx;
		color: #000000;
	}
	.text {
		font-size: 26rpx;
		color: #CCCCCC;
	}
	/*底部选择弹层*/
</style>
